<template>
  <div class="files-view">
    <div class="view-header">
      <h2 class="view-title">文件管理</h2>
      <p class="view-subtitle">管理您的聊天文件和媒体</p>
    </div>

    <div class="files-content">
      <!-- 筛选器区域 -->
      <div class="filters-section">
        <div class="filter-row">
          <ContactPicker v-model="selectedContact" @change="handleContactChange" />
          <SelectPicker
            v-model="selectedFileType"
            :file-counts="fileTypeCounts"
            @change="handleFileTypeChange"
          />
          <DatePicker v-model="selectedDateRange" @change="handleDateRangeChange" />
        </div>
      </div>

      <!-- 选项栏 -->
      <div class="options-bar">
        <!-- 显示模式切换 -->
        <div class="display-mode-toggle">
          <button
            class="mode-btn"
            :class="{ active: displayMode === 'card' }"
            @click="displayMode = 'card'"
          >
            <Grid :size="18" />
            <span>卡片视图</span>
          </button>
          <button
            class="mode-btn"
            :class="{ active: displayMode === 'list' }"
            @click="displayMode = 'list'"
          >
            <List :size="18" />
            <span>列表视图</span>
          </button>
        </div>

        <!-- 数据量选择器 -->
        <div class="data-amount-selector">
          <span class="data-amount-label">加载数据量：</span>
          <select v-model="dataAmount" class="data-amount-select" @change="generateMockData">
            <option value="20">少量 (20条)</option>
            <option value="100">中等 (100条)</option>
            <option value="500">大量 (500条)</option>
            <option value="1000">超大量 (1000条)</option>
          </select>
        </div>
      </div>

      <!-- 文件显示区域 -->
      <div class="files-display-area">
        <!-- 条件检查提示 -->
        <EmptyState v-if="!canShowFiles" message="请选择联系人、文件类型和日期范围以查看文件" />

        <!-- 卡片视图 -->
        <DisplayCard
          v-else-if="displayMode === 'card'"
          :files="filteredFiles"
          @card-click="selectFile"
          @download="downloadFile"
          @delete="deleteFile"
        />

        <!-- 列表视图 -->
        <DisplayList
          v-else
          :files="filteredFiles"
          @file-click="selectFile"
          @download="downloadFile"
          @delete="deleteFile"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { Grid, List } from 'lucide-vue-next'
import ContactPicker from './ContactPick.vue'
import SelectPicker from './SelectPicker.vue'
import DatePicker from './DatePicker.vue'
import DisplayCard from './DisplayCard.vue'
import DisplayList from './DisplayList.vue'
import EmptyState from './EmptyState.vue'
import { generateMockFiles } from '@/utils/mockDataGenerator'

// 显示模式
const displayMode = ref('card') // 'card' 或 'list'

// 数据量控制
const dataAmount = ref<string | number>('100')

// 模拟文件数据
const mockFiles = ref<any[]>([])

// 筛选状态
const selectedContact = ref(null)
const selectedFileType = ref('all')
const selectedDateRange = ref(null)

// 生成模拟数据
const generateMockData = () => {
  mockFiles.value = generateMockFiles(Number(dataAmount.value))
  console.log(`生成了${mockFiles.value.length}条模拟文件数据`)
}

// 初始化生成模拟数据
onMounted(() => {
  generateMockData()
})

// 判断是否可以显示文件列表
const canShowFiles = computed(
  () =>
    selectedContact.value && selectedFileType.value !== 'all' && selectedDateRange.value !== null
)

// 计算文件类型统计
const fileTypeCounts = computed(() => {
  const counts: Record<string, number> = {}
  mockFiles.value.forEach((file) => {
    counts[file.type] = (counts[file.type] || 0) + 1
  })
  return counts
})

// 筛选后的文件列表
const filteredFiles = computed(() => {
  let result = mockFiles.value

  // 按联系人筛选
  if (selectedContact.value) {
    result = result.filter((file) => file.sender === selectedContact.value.name)
  }

  // 按文件类型筛选
  if (selectedFileType.value !== 'all') {
    result = result.filter((file) => file.type === selectedFileType.value)
  }

  // 按日期范围筛选
  if (selectedDateRange.value) {
    const startDate = new Date(selectedDateRange.value.startDate)
    const endDate = new Date(selectedDateRange.value.endDate)
    result = result.filter((file) => {
      const fileDate = new Date(file.date)
      return fileDate >= startDate && fileDate <= endDate
    })
  }

  return result
})

// 事件处理函数
const handleContactChange = (contact: Record<string, any>): void => {
  console.log('选择联系人:', contact)
  // 自动选择一个文件类型，如果未选择
  if (selectedFileType.value === 'all' && fileTypeCounts.value) {
    const types = Object.keys(fileTypeCounts.value)
    if (types.length > 0) {
      selectedFileType.value = types[0]
    }
  }
}

const handleFileTypeChange = (fileType: string): void => {
  console.log('选择文件类型:', fileType)
}

const handleDateRangeChange = (dateRange: Record<string, any>): void => {
  console.log('选择日期范围:', dateRange)
}

const selectFile = (file: Record<string, any>): void => {
  console.log('选择文件:', file)
}

const downloadFile = (file: Record<string, any>): void => {
  console.log('下载文件:', file)
}

const deleteFile = (file: Record<string, any>): void => {
  console.log('删除文件:', file)
  // 从列表中移除文件
  const index = mockFiles.value.findIndex((item) => item.id === file.id)
  if (index !== -1) {
    mockFiles.value.splice(index, 1)
  }
}
</script>

<style scoped>
.files-view {
  height: 100%;
  padding: 24px;
  background-color: var(--theme-bg-primary);
  display: flex;
  flex-direction: column;
}

.view-header {
  margin-bottom: 32px;
}

.files-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 重要：允许内容收缩 */
}

.view-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--theme-text-primary);
  margin-bottom: 8px;
}

.view-subtitle {
  color: var(--theme-text-secondary);
  font-size: 14px;
}

.filters-section {
  margin-bottom: 24px;
}

.filter-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.options-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.display-mode-toggle {
  display: flex;
  gap: 8px;
}

.mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--theme-border-light);
  border-radius: 6px;
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-btn.active {
  border-color: var(--theme-primary);
  color: var(--theme-primary);
  background-color: var(--theme-primary-light);
}

.data-amount-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-amount-label {
  color: var(--theme-text-secondary);
  font-size: 14px;
}

.data-amount-select {
  padding: 6px 10px;
  border: 1px solid var(--theme-border-light);
  border-radius: 6px;
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.data-amount-select:focus {
  border-color: var(--theme-primary);
  outline: none;
}

.files-display-area {
  flex: 1;
  min-height: 0; /* 重要：允许内容收缩 */
  display: flex;
  flex-direction: column;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .options-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .files-view {
    padding: 16px;
  }
}
</style>
